<template>
  <div>
    <el-table class="mt20" v-loading="loading" :data="tableList">
      <!-- <el-table-column type="selection" width="55" align="center" show-overflow-tooltip /> -->
      <el-table-column width="85" label="Id" align="center" prop="id" />
      <el-table-column label="报告编号" align="center" prop="reportNumber" />
      <el-table-column label="试验项目" align="center" prop="project" />
      <el-table-column label="报告文件" align="center" prop="reportFile">
        <template slot-scope="scope">
          <!-- <dict-tag :options="typeOptions" :value="scope.row.type" /> -->
          <span><a style="color: #1890ff;" :href="scope.row.reportHref" :download="getFileName(scope.row.reportFile)">{{ getFileName(scope.row.reportFile)}}</a></span>

        </template>
      </el-table-column>
      <el-table-column label="报告日期" align="center" prop="reportDate" />
      <el-table-column label="操作" align="center" width="100%" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
            >编辑</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增报告 -->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openSampleDialog" width="600px"
      append-to-body>
      <el-form :inline="true" v-model="formParams">
        <el-row class="margin-bottom-10">
          <el-col :span="10">
            <el-form-item label="委托编号" style="margin-bottom: 10px;">
              <span>{{rowArr.number}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="委托单位" style="margin-bottom: 10px;">
              <span>{{rowArr.enterpriseName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="margin-bottom-10">
          <el-col :span="24">
            <el-form-item label="工程名称" style="margin-bottom: 10px;">
              <span>{{rowArr.engineeringName}}</span>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row class="margin-bottom-10">
          <el-col :span="10">
            <el-form-item label="业务类型" style="margin-bottom: 10px;">
              <span v-if="rowArr.businessType == 'shinei'">室内检测</span>
              <span v-if="rowArr.businessType == 'shiwai'">现场检测</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="试验项目" style="margin-bottom: 10px;">
              <el-select v-model="formParams.project" placeholder="请选择" @change="handleProjectChange($event)">
                <el-option v-for="item in shiyanList" :key="item.value" :label="item.label"
                  :value="item.commonId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="报告编号" style="margin-bottom: 10px;">
              <!-- <el-input type="input" v-model="formParams.reportNumber" style="width:80%;"></el-input> -->
              <el-input v-if="isShowcreateReport" type="input" v-model="formParams.reportNumber" placeholder="请填写报告编号" :readonly="true" ></el-input>
            <el-button v-else type="primary" size="mini" @click="createReportNumber">生成报告编号</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="检测数量" style="margin-bottom: 10px;">
              <el-input type="input" v-model="formParams.testNum" style="width: 80%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="报告文件" style="margin-bottom: 10px;">
              <fileUpload v-model="formParams.reportFile" :limit="1" />
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="报告日期" style="margin-bottom: 10px;">
              <!-- <el-date-picker v-model="formParams.reportDate" type="date" placeholder="选择日期">
              </el-date-picker> -->
              <el-input type="input" v-model="formParams.reportDate" :readonly="true" placeholder="报告日期" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发放份数" style="margin-bottom: 10px;">
              <el-input type="input" v-model="formParams.grantNum" style="width: 80%;"></el-input>

            </el-form-item>
            <el-form-item label="发放人员" style="margin-bottom: 10px;">
              <el-input type="input" v-model="formParams.grantStaff" style="width: 80%;"></el-input>

            </el-form-item>
            <!-- <el-form-item label="发放日期" style="margin-bottom: 10px;">
              <el-date-picker v-model="formParams.grantDate" type="date" placeholder="发放日期" >
              </el-date-picker>
            </el-form-item> -->

            <el-form-item label="发放日期" style="margin-bottom: 10px;">
                <el-input type="input" v-model="formParams.grantDate" style="width: 80%;" :readonly="true" ></el-input>
            </el-form-item>

            <el-form-item label="发放方式" style="margin-bottom: 10px;">
                <el-input type="input" v-model="formParams.grantType" style="width: 80%;"></el-input>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <!-- <el-button @click="cancel(openSampleDialog = false)">关闭</el-button> -->
      </div>
    </el-dialog>
    <el-row class="mt20">
      <el-col style="text-align: center;margin-top:15px" :span="24">
        <el-button type="primary" @click="onAdd">新增</el-button>
        <!-- <el-button @click="onclose">关闭</el-button> -->
        <el-button type="primary" @click="updateDoneTrue">完结</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getReportList, delReport, updateReport, getReportListdt, addReport, geteditEnterprise
} from "@/api/enterprise/enterprise";
import { listAttachedDataAll } from "@/api/attachedData/attachedData";
import { listSampleAll } from "@/api/sample/sample";
import { createReportNumber } from "@/api/report/report";
import { listCommissionAll,getCommission,updateDoneTrue } from "@/api/commission/commission";
import { Notification, MessageBox, Message } from 'element-ui'

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      title:"",
      rowArr: {},
      shiyanQuery:{
        commissionId:0
      },//试验项目搜索条件
      shiyanList:[],//所有试验项目
      detection_type:[],
      instrumentList:[],//所有仪器
      detection_item_indoor:[],//字典：室内检测项目

      tableList: [],
      openSampleDialog: false,
      formParams: {
        // unitvalue: "",
        // name1: "",
        // expervalue: "",
        // report:'',
        // people:'',
        // date:''

      },

      option: [
        {
          label: "1",
          value: "1"
        }
      ],
      //创建报告编号搜索
      createReportQuery:{
        commissionId:"",
        project:'',
        businessType:'',
      },
      isShowcreateReport:false
    };
  },
  created() {
    //this.rowArr = JSON.parse(this.$route.params.row)
    this.getCommission(this.$route.query.id);
  },
  methods: {
    //完结 按钮
    updateDoneTrue(){
      console.log("done")
      let commissionId = this.rowArr.id
      updateDoneTrue(commissionId).then(response => {
        if(response.code == 200){
          Message({
            message: response.msg,
            type: 'success',
            duration: 5 * 1000
          })
        }
      });
    },
    //委托表详细
    getCommission(id){
      let commissionId = this.commissionId
      getCommission(id).then(res => {
        this.rowArr = res.data
        //获取字典等信息
        this.getDistList();

        //获取试验项目列表
        this.getShiyanList();
        //获取列表
        this.getList()
        this.riqi();
      })
    },

    //字典信息
    getDistList(){
      //检测类型
      this.getDicts("detection_type").then(response => {
        let data = response.data
        let new_arr = [];
        data.forEach(function (item) {
          new_arr[item.dictValue] = item.dictLabel
        });
        this.detection_type = new_arr;
      });

      //室内字典
      this.getDicts("detection_item_indoor").then(response => {
        let data = response.data
        console.log("ddd")
        console.log(data)
        let new_arr = [];
        data.forEach(function (item) {
          new_arr[item.dictValue] = item.dictLabel
        });
        this.detection_item_indoor = new_arr;
      });
    },

    //获取试验项目列表
    getShiyanList(){
      let _this = this
      this.shiyanQuery.commissionId = this.rowArr.id
      let businessType = this.rowArr.businessType
      //新增 遍历试验项目
      if(businessType == "shinei"){
        listSampleAll(this.shiyanQuery).then(response => {
          let data = response.data
          data.forEach(function (item) {
            item.label = _this.detection_item_indoor[item.project]
            item.projectNew = _this.detection_item_indoor[item.project]
            item.commonId = item.id
          });
          this.shiyanList = data;
        });
      }else{
        console.log("室外")
        listAttachedDataAll(this.shiyanQuery).then(response => {
          let data = response.data
          console.log(data)
          data.forEach(function (item) {
            item.label = item.testMethod
            item.project = item.testMethod
            item.projectNew = item.testMethod
            item.commonId = item.id
          });''
          this.shiyanList = data;
        });
      }
    },

    getList() {
      let commission_id = this.rowArr.id
      console.log("tangy")
      console.log(commission_id)
      this.loading = true;
      getReportList({commissionId:commission_id}).then(res => {
        let list = res.rows
        list.forEach(function (item) {
          item.reportHref =  process.env.VUE_APP_BASE_API + item.reportFile
        });
        this.tableList = list
        this.loading = false;
      })
    },

    onAdd() {
      this.reset();
      this.title = "新增报告";
      this.openSampleDialog = true;
    },


    // 试验项目 下拉选择
    handleProjectChange(id){
      console.log(id)
      let _this = this
      let shiyanList = this.shiyanList;
      let businessType = this.rowArr.businessType
      if(businessType == "shinei"){
        console.log(shiyanList)
        shiyanList.forEach(function (item) {
          if(item.id == id){
            _this.formParams.project = item.projectNew
            _this.formParams.sampleId = item.commonId
            _this.createReportQuery.project = item.project
          }
        })
      }else{
        shiyanList.forEach(function (item) {
          if(item.id == id){
            _this.formParams.project = item.projectNew
            _this.formParams.attachedDataId = item.commonId
            _this.createReportQuery.project = item.project
          }
        })
      }

      this.isShowcreateReport = false
      console.log(_this.formParams)
    },

    //生成报告编号
    createReportNumber(){
      let _this = this
      if(this.createReportQuery.project == ""){
        this.msgError("请选择试验项目");
        return false
      }

      this.formParams.commissionId = this.rowArr.id
      this.formParams.projectOld = this.createReportQuery.project
      this.formParams.businessType = this.rowArr.businessType

      // console.log(this.formParams)
      // return false
      createReportNumber(_this.formParams).then(response => {
        console.log("dgd")
        console.log(response)
        _this.formParams.id = response.data.id
        _this.formParams.reportNumber = response.data.reportNumber
        _this.isShowcreateReport = true

      });
    },

    submitForm() {
      if (this.formParams.id != null) {
        updateReport(this.formParams).then(res => {
          this.msgSuccess("修改成功");
          this.getList()
          this.openSampleDialog = false
        })

      } else {
        addReport(this.formParams).then(res => {
          this.msgSuccess("添加成功");
          geteditEnterprise(this.formParams.commissionId).then(res => {
            this.sendNotice(res,this.formParams.project);
          });
          this.getList()
          this.openSampleDialog = false
          this.reset()

        })
      }


    },
    sendNotice(data,project) {

    },
    handleDelete() { },

    /** 修改按钮操作 */
    handleUpdate(row) {
      //this.reset();
      const id = row.id || this.ids;
      getReportListdt(id).then(response => {
        this.formParams = response.data;
        this.openSampleDialog = true;
        this.isShowcreateReport = true
        this.title = "修改检测报告";
      });
    },
    // 表单重置
    reset() {
      this.formParams = {}
      this.isShowcreateReport = false
      this.riqi()
      // this.resetForm("form");
    },
    riqi(){
      // //当天日期
      let today = new Date();
      const currentDate = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
      // console.log("riqihahaha")
      // console.log(currentDate)
      this.formParams.reportDate = currentDate;
      this.formParams.grantDate = currentDate;
    },

    // 获取文件名称
    getFileName(name) {
      if(name){
        if (name.lastIndexOf("/") > -1) {
          return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
        } else {
          return "";
        }
      }else{
        return "";
      }
    },
  }
};
</script>

<style scoped>
/* .el-input{
    width: 200px;
} */
</style>
